<template>
  <!--  <van-search-->
  <!--      v-model="searchText"-->
  <!--      placeholder="请输入队伍名称"-->
  <!--      @search="listTeam"-->
  <!--  />-->
  <form action="/">
    <van-search
        v-model="searchText"
        show-action
        placeholder="请输入队伍名称"
        @search="onSearch"
    />
  </form>
  <van-tabs v-model:active="active" @change="onTabChange">
    <van-tab title="公开昭示" name="public"></van-tab>
    <van-tab title="密法封印" name="encrypt"></van-tab>
  </van-tabs>


  <van-floating-bubble
      v-model:offset="offset"
      axis="xy"
      icon="plus"
      magnetic="x"
      @click="doAddTeam"
  />

  <team-card-list :teamList="teamList" @update:teamList="teamList = $event"/>
</template>

<script setup lang="ts">

import {useRouter} from "vue-router";
import TeamCardList from "../../global/TeamCardList.vue";
import {onMounted, ref} from 'vue';
import myAxios from "../../plugins/myAxios.ts";
import {showSuccessToast} from "vant";

const routes = useRouter()

const doAddTeam = () => {
  routes.push({
    path: '/team/add'
  })
}

/**
 * 浮动按钮的偏移量
 * @type {{x: number, y: number}}
 */
const offset = ref({x: 300, y: 550});

const teamList = ref([])

const active = ref("public")
const searchText = ref('')
/**
 * 切换标签
 * @param name
 */
const onTabChange = (name: string) => {
  active.value = name;
  if (name === "public") {
    listTeam(0);
  } else {
    listTeam(2);
  }

}

/**
 * 搜索队伍
 * @param status
 * @returns {Promise<void>}
 */
const listTeam = async (status: number) => {
  const res = await myAxios.get("/team/list/page", {
    params: {
      searchText: searchText.value,
      pageNum: 1,
      status: status,
    },
  });
  if (res?.code === 0) {
    console.log(res.data.records)
    teamList.value = res.data.records;
    // showSuccessToast('搜索成功')
  } else {
    showSuccessToast('加载队伍失败，请刷新重试');
  }
}

// 页面加载时只触发一次
onMounted(() => {
  listTeam(0);
})

const onSearch = (val: string) => {
  listTeam(val);
};


</script>

<style scoped>

</style>